<template>
  <view class="">
    <!-- <uni-nav-bar title="银证账户"  fixed empty backgroundColor="#fff">
			<template #left>
				<tui-icon @click="goUp"  name="arrowleft"  :size="22"></tui-icon>
			</template>
		</uni-nav-bar> -->

    <t-header @back="goUp">银证账户</t-header>

    <view class="pay">
      <view class="head">
        <text class="title">银证转入金额</text>
        <text class="sub">最小转入金额为{{ charge_low }}元</text>
      </view>
      <view class="moneybox">
        <input
          type="number"
          style="height: 40px"
          focus
          :placeholder="cantDiyInput ? '请选择以下金额' : '请输入转入金额'"
          v-model="cmoney"
          :disabled="cantDiyInput"
        />
        <view class="select" v-if="amounts.length > 0">
          <button v-for="amt in amounts" class="button" @click="choose(amt)">
            {{ amt }}
          </button>
        </view>
      </view>
      <tui-button
        :loading="submiting"
        :disabled="submiting || tabs.length <= 0 || cmoney == ''"
        @click="tiao"
        type="theme"
        >银证转入</tui-button
      >

      <view class="padding pagev">
        <u-parse :content="content"></u-parse>
      </view>
      <!-- <button type="theme">银证转入</button> -->
      <tui-toast ref="toastRef"></tui-toast>
    </view>

    <!-- #ifdef APP || APP-PLUS -->
    <view class="padding-top-app" v-if="showWeb">
      <web-view v-if="url" :src="url" :webview-styles="webViewStyle"></web-view>
    </view>
    <!-- #endif -->

    <!-- #ifdef H5 -->
    <view class="padding-top" v-show="showWeb">
      <!-- <tui-icon name="back" color="#000" size="48"></tui-icon> -->
      <web-view
        :src="url"
        :style="{ width: webViewStyle.width, height: webViewStyle.height }"
      ></web-view>
    </view>

    <!-- #endif -->
  </view>
</template>

<script setup>
  import { ref, computed, inject } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';

  const tui = inject('tui');

  import { getyhkconfignew, recharge } from '@/api/user.js';
  import thorui from '@/components/common/tui-clipboard/tui-clipboard.js';
  import tuiToast from '@/components/thorui/tui-toast/tui-toast.vue';
  import tuiButton from '@/components/thorui/tui-button/tui-button.vue';
  import uParse from '@/components/uni/uParse/src/wxParse.vue';

  import THeader from '@/components/views/t-header/index.vue'; // 头部组件

  onLoad((t) => {
    if (t) {
      getdetail(t.bank_id);
    }
  });

  const amounts = ref([]);
  const bankid = ref('');
  const cantDiyInput = ref(false);
  const submiting = ref(false);
  const currentTab = ref(0);
  const cmoney = ref('');
  const tabs = ref([]);
  const itemwidth = ref('50%');
  const sliderWidth = ref(50);
  const showWeb = ref(false);
  const url = ref('');
  const channelData = ref([
    {
      bankinfo: '',
      khzhihang: '',
      name: '',
      account: '',
      id: '',
    },
  ]);
  const charge_low = ref(100);
  const type = ref('yhxy');
  const yhxy = ref(`<p></p>`);
  const webViewStyle = ref({
    width: '100%',
    height: '500px',
    top: '70px',
  });

  const toastRef = ref();

  const content = computed(() => {
    return yhxy.value;
  });

  const goUp = () => {
    uni.switchTab({
      url: '/pages/my/index',
    });
  };

  const tiao = () => {
    if (cmoney.value < charge_low.value) {
      tui.toast('最低充值' + charge_low.value + '元');
    }
    // 提交
    recharge({
      money: cmoney.value,
      pay_type: 3,
      sysbankid: channelData.value[currentTab.value].id,
    }).then((res) => {
      if (res.retCode == 0) {
        url.value = res.payJumpUrl;
        console.log(url.value);
        // 获取系统信息
        const systemInfo = uni.getSystemInfoSync();

        // // 获取窗口高度
        const windowHeight = systemInfo.windowHeight;
        webViewStyle.value.height = windowHeight - 50 + 'px';
        showWeb.value = true;
      } else {
        tui.toast(res.retMsg);
      }
    });
  };

  const getdetail = (id) => {
    // 获取通道信息
    getyhkconfignew({ bankid: id }).then((res) => {
      if (res.code == 1) {
        channelData.value = res.data.list;
        yhxy.value = res.data.tips;
        let d = [];
        res.data.list.forEach((v) => {
          // v.createtime = this.$utils.formatDate('y-m-d h:i:s',v.createtime*1000,2)
          // 给tab赋值
          if (v.account) {
            let amt = v.account.split(',');
            cantDiyInput.value = true;
            for (var i = 0; i < amt.length; i++) {
              let at = parseInt(amt[i]);
              if (at == 0) {
                cantDiyInput.value = false;
              } else {
                amounts.value.push(at);
              }
            }
            // this.amounts = amt
          }
          d.push({ name: v.tdname });
        });
        tabs.value = d;
        sliderWidth.value = 100 / tabs.value.length;
        itemwidth.value = 100 / tabs.value.length + '%';
        charge_low.value = res.data.charge_low;
      }
    });
  };

  const choose = (e) => {
    cmoney.value = e;
  };

  const change = (e) => {
    currentTab.value = e.index;
  };

  const copyAccount = (account) => {
    // #ifdef APP-PLUS
    uni.setClipboardData({
      data: account,
    });
    // #endif

    // #ifdef H5 || MP-ALIPAY
    thorui.getClipboardData(
      account,
      (res) => {
        if (res) {
          //复制成功
          toastRef.value &&
            toastRef.value.show({
              title: '复制成功',
              icon: false,
            });
        } else {
          //复制失败
          toastRef.value &&
            toastRef.value.show({
              title: '复制失败',
              icon: false,
            });
        }
      },
      event
    );
    // #endif
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #fff;
  }
  .pay {
    padding: 20px 15px;
    .head {
      display: flex;
      align-items: center;
      .title {
        font-size: 16px;
      }
      .sub {
        font-size: 12px;
        margin-left: 5px;
        color: #898989;
      }
    }
    .moneybox {
      padding: 15px 0;
      input {
        background-color: #f7f7f7;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 15px;
      }
      .select {
        display: flex;
        justify-content: space-between;
        .button {
          margin: 0;
          color: #898989;
          padding-left: 25px;
          padding-right: 25px;
          ::after {
            border: 0px;
          }
        }
      }
    }
    .tabcontainer {
      margin-top: 10px;
      margin-bottom: 25px;
      .content {
        background-color: #f7f7f7;
        margin-top: 20px;
        border-radius: 8px;
        padding: 15px;
        padding-bottom: 5px;
        .row {
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-bottom: 10px;
          .blue {
            color: #5b7cf9;
          }
        }
      }
    }
    uni-button[type='primary'] {
      color: #fff;
      background-color: #5b7cf9;
      padding: 5px 0;
    }
  }
  .padding-top {
    position: fixed;
    top: 24px;
    height: 100vh;
    width: 100%;
    left: 0;

    ::v-deep(web-view) {
      height: 100vh;
      padding: 0;
      background: #fff;
    }
  }
  // min-height: 55vh;
  .pagev {
    box-sizing: border-box;
    min-height: 25vh;
  }
</style>
